<%@ page import="xxd.SysInitData" %>

<%
    if(!xxd.SysInitData.isAvailable){
        response.sendRedirect( "${request.getContextPath()}/error.html"  )
    }
%>
<g:set var="PUUID" value="${params?.boardId}" />
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #contextmenu,#appBordAlertInfo {
        border: 1px solid #aaa;
        border-bottom: 0;
        background: #eee;
        position: absolute;
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
    }

    #contextmenu li a {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #aaa;
        cursor: pointer;
    }

    #contextmenu li a:hover {
        background: #fff;
    }
    </style>
    <script type="text/javascript" src="${request.getContextPath()}/js/public-head.js"></script>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <!--"${request.getContextPath()}/appBordNodeMonitor/show" -->
                <a class="layui-btn" id="updateNode" >新增节点</a>
                <a class="layui-btn" id="F${PUUID}" target="_blank" >全屏</a>
                <a class="layui-btn"  id="R${PUUID}"  >刷新</a>
                <a class="layui-btn" id="userInfo"  >使用说明</a>
            </div>
        </div>
    </div>

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <canvas id="ID${PUUID}" width="100%" height="100%"></canvas>
            </div>
        </div>
    </div>
</div>

<ul id="contextmenu" style="display:none;">
    <li><a>放大</a></li>
    <li><a>缩小</a></li>
    <li><a>横向拉伸</a></li>
    <li><a>竖向拉伸</a></li>
    <li><a>删除该节点</a></li>
</ul>

<ul id="appBordAlertInfo" style="display:none;width:100px;height: auto;padding: 5px">
    ...
</ul>

<script id="appBord-index-info" type="text/html">
<div class="layui-card">
<div class="layui-card-body">
    <p>1.配置基础信息：报警配置、设备分区、状态分类
    <p>2.设备看板中，维护节点：可新增、修改节点
    <p>3.看板展示数据字典：App_Bord_Node_Monitor
    <p>NODE_NAME(节点名称：唯一)
    <p>NODE_NO(节点编码：唯一)
    <p>NODE_DESC(描述信息：鼠标移入展示内容)
    <p>NODE_IMG(节点图片)
    <p>GROUP_NO(分组编码：与基础信息设备分区对应)
    <p>HEIGHT(节点高度：图片无效)
    <p>WIDTH(节点宽度：图片无效)
    <p>TYPE_NO(node_no状态编码：与基础信息状态分类对应)
    <p>ALARM_INFO(报警展示信息)
    <p>ALARM_NO(报警编码：与基础信息报警对应)
    <p>RELA_NODE_NO(链接节点编码：node_no)
    <p>RELA_LINE(链接线)
    <p>X(相对屏幕坐标:更换不同尺寸屏幕时失效)
    <p>Y(相对屏幕坐标:更换不同尺寸屏幕时失效)
    <p>3.实时刷新：将看板布局好后，只用实时刷新
    <p>App_Bord_Node_Monitor（TYPE_NO,ALARM_NO,ALARM_INFO）即可。
    <p>页面刷新频率1分钟。
    <p>4.节点图片位置/web-app/appBord/img;背景图片/web-app/appBord/bg.jpg
</div>
</div>
</script>



<script type="text/javascript">
    $('#F${PUUID}').click(function(){
        //runPrefixMethod(canvas, "RequestFullScreen")
        window.open('${request.getContextPath()}/appBord/appBordNodeMonitor/fullScreen.gsp?boardId=${params?.boardId}','','scrollbars=no,location=no,menubar=no,titlebar=no,channelmode=yes')
    });

    $('#R${PUUID}').click(function(){
        location.reload()
    });


    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        //formSelects: 'formSelects-v4'
    }).use([ 'table','form' ], function() {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        $("#updateNode").click(function(){
            layer.open({
                type:2,
                content:"${request.getContextPath()}/appBordNodeMonitor/show?boardId=${params?.boardId}",
                area: ['40%', '70%'],title:"新增节点",
            end:function(){
                location.reload()
            }})
        })

        $("#userInfo").click(function(){
            layer.open({type:1,content:$("#appBord-index-info").html(),area: ['30%', '70%'],title:"使用说明"})
        })
    });

</script>
<g:render template="appBordNodeMonitor/js" model="${[boardId:params?.boardId]}"></g:render>


</body>